<template>
  <div>
  <div class="Beauty">
    <img src="../assets/yera.png" alt="">
    <div>
      <div class="Label">
        <div class="store--warp__scroll">
          <ul class="store--container">
            <router-link to="BeautyMakeupTop" class="order--li order">
              <li @click="toggleRouter(0)" :style="{'color' :index === 0 ? '#2879e7' : '#000'}">
                美妆
              </li>
            </router-link>
            <router-link to="apparatus" class="order--li">
              <li @click="toggleRouter(1)" :style="{'color' :index === 1 ? '#2879e7' : '#000'}">
                口红
              </li>
            </router-link>
            <router-link to="Cleansing" class="order--li">
              <li @click="toggleRouter(2)" :style="{'color' :index === 2 ? '#2879e7' : '#000'}">
                面膜
              </li>
            </router-link>
            <router-link to="Cosmetics" class="order--li">
              <li @click="toggleRouter(3)" :style="{'color' :index === 3 ? '#2879e7' : '#000'}">
                护肤仪
              </li>
            </router-link>
            <router-link to="FacialMask" class="order--li">
              <li @click="toggleRouter(4)" :style="{'color' :index === 4 ? '#2879e7' : '#000'}">
                彩妆
              </li>
            </router-link>
            <router-link to="Lipstick" class="order--li">
              <li @click="toggleRouter(5)" :style="{'color' :index === 5 ? '#2879e7' : '#000'}">
                香水
              </li>
            </router-link>
            <router-link to="Perfume" class="order--li">
              <li @click="toggleRouter(6)" :style="{'color' :index === 6 ? '#2879e7' : '#000'}">
                洁面
              </li>
            </router-link>
            <router-link to="Replenishment" class="order--li">
              <li @click="toggleRouter(7)" :style="{'color' :index === 7 ? '#2879e7' : '#000'}">
                补水
              </li>
            </router-link>
            <li :style="{left: index*12 + 'vw'}" class="slider--line"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Beauty",
  data() {
    return {
      index:0,
      bsl: null,
    }
  },
  methods: {
    // nav滚动
    toggleRouter(key) {
      this.index = key;
      if(key >= 2 && key <= 5){
        this.bsl.scrollTo((key - 2) * -100,0,200)
      }
    },
  },
  mounted(){
    this.bsl = new this.$BScroll('.store--warp__scroll', {
      scrollX: true,
      scrollY: false,
      click: true,
    });
  },
}

</script>

<style lang="scss" scoped>
  Beauty{
  position: relative;
  top: 200px;
}
  .Beauty>img{
    width: 100vw;
    height: inherit;
    position: relative;
    top: 120px;
  }
  .store--warp__scroll{
    width: 100vw;
    overflow: hidden;
    height: 60px;
    background: #fff;
    margin-top: 1.2rem;
    position: fixed;
    z-index: 9;
    top: 180px;
    .store--container{
      padding: 0;
      list-style: none;
      width: 600vw;
      height: 65px;
      font-size: 0;
      position: relative;
      li{
        font-size: 14px;
        display: inline-block;
        width: 12vw;
        line-height: 40px;
        color: #666;
        text-align: center;
      }
      .active{
        color: #2879e7;
      }
      .slider--line{
        font-size: 14px;
        width: 12vw;
        height: 2px;
        border-radius: 1px;
        position: absolute;
        left: 0;
        bottom: .3rem;
        transition: all .4s ease-in-out;
        &::before{
          content: '';
          background: #2879e7;
          display: inline-block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 3em;
          height: 3px;
        }
      }
    }
  }
</style>
